<template>
    <div class="chart-config">
        <el-drawer v-model="drawer" :close-on-click-modal="false" title="面板配置">
            <el-scrollbar>
                <div class="itm">
                    <div style="display: flex; justify-content: space-between;">
                        <div><el-tag type="primary">内容配置</el-tag> </div>
                        <div><el-button size="small" type="danger" @click="previewEv" plain>预览</el-button><el-button
                                size="small" type="danger" @click="saveEv" plain>保存</el-button></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">一级标题</div>
                        <div class="right"> <el-input v-model="data.text.name" style="width: 100%"
                                placeholder="Please input" clearable /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">左边标题</div>
                        <div class="right"> <el-input v-model="data.text.titleLeft" style="width: 100%"
                                placeholder="Please input" clearable /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">右边标题</div>
                        <div class="right"> <el-input v-model="data.text.titleRight" style="width: 100%"
                                placeholder="Please input" clearable /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">左边内容</div>
                        <div class="right"> <el-input v-model="data.text.contentLeft" style="width: 100%"
                                placeholder="Please input" clearable /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">右边内容</div>
                        <div class="right"> <el-input v-model="data.text.contentRight" style="width: 100%"
                                placeholder="Please input" clearable /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">间隔时间</div>
                        <div class="right"> <el-input-number v-model="data.time" :min="4" step-strictly
                            style="width: 100%" /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">数据中心</div>
                        <div class="right" style="display: flex;"> <el-input disabled v-model="data.wh_name"
                                style="width: 100%" placeholder="请选择数据仓库" />
                            <div style="display: flex;padding-left: 10px;box-sizing: border-box;"><el-button
                                    @click="deleteDataWhEv()" :icon="Delete" /><el-button @click="serachDataEv()"
                                    :icon="Search" /></div>
                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">连接池</div>
                        <div class="right"> <el-input style="background-color: white;" disabled v-model="data.pool_name"
                                placeholder="请选择数据库配置" class="input-with-select">
                                <template #append>
                                    <el-button @click="serachPoolEv()" :icon="Search" />
                                </template>
                            </el-input></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">
                            <el-popover placement="top-start" title="数据源说明" :width="200" trigger="hover">
                                <template #reference>
                                    <el-button class="m-2">数据源</el-button>
                                </template>
                                <template #default>
                                    <div style="background-color: #F2F2F2;">别名为contentLeft为左边数据字段,别名为contentRight为左右数据字段</div>
                                    <div style="background-color: #F9FFF5;"> select '4pcs/7单' as contentLeft,'6pcs/5单' as contentRight
                                    </div>
                                </template>
                            </el-popover>
                        </div>
                        <div class="right"> <el-input v-model="data.sql" style="width: 100%" :rows="2"
                                type="textarea" /></div>
                    </div>
                </div>
                <div class="itm">
                    <div><el-tag type="primary">样式配置</el-tag></div>
                    <div class="itm-config">
                        <div class="left">模板背景颜色</div>
                        <div class="right">
                            <el-color-picker v-model="data.backgroundColor" show-alpha />
                        </div>
                    </div>

                    <div class="itm-config">
                        <div class="left">标题字体颜色</div>
                        <div class="right"> <el-color-picker v-model="data.nameFontColor" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">标题字体大小</div>
                        <div class="right"> <el-input-number v-model="data.nameFontSize" :min="0" step-strictly
                                style="width: 100%" />
                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">标题字体高度</div>
                        <div class="right"> <el-input-number v-model="data.nameHeight" :min="0" step-strictly
                                style="width: 100%" />
                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">左右字体大小</div>
                        <div class="right"> <el-input-number v-model="data.titleFontSize" :min="0" step-strictly
                                style="width: 100%" />
                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">左右字体颜色</div>
                        <div class="right"> <el-color-picker v-model="data.titleFontColor" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">左右标题高度</div>
                        <div class="right"> <el-input-number v-model="data.titleHeight" :min="0" step-strictly
                                style="width: 100%" />
                        </div>
                    </div>

                    <div class="itm-config">
                        <div class="left">内容字体大小</div>
                        <div class="right"> <el-input-number v-model="data.contentFontSize" :min="0" step-strictly
                                style="width: 100%" /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">内容字体颜色</div>
                        <div class="right"> <el-color-picker v-model="data.contentFontColor" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">分割线高度</div>
                        <div class="right"> <el-input-number v-model="data.lineHeight" :min="0" step-strictly
                                style="width: 100%" />
                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">分割线颜色</div>
                        <div class="right"> <el-color-picker v-model="data.lineBackgroundColor" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">边框模板</div>
                        <div class="right">

                            <el-select style="width: 100%;" v-model="data.border"
                                placeholder="Select" size="large">
                                <el-option :label="key" :value="key" v-for="(value,key) in chartBorderComponent" :key="key"/>
                            </el-select>

                        </div>
                    </div>
                    <div class="itm-config">
                        <div class="left">边框颜色1</div>
                        <div class="right"> <el-color-picker v-model="data.borderColor1" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">边框颜色2</div>
                        <div class="right"> <el-color-picker v-model="data.borderColor2" show-alpha /></div>
                    </div>
                    <div class="itm-config">
                        <div class="left">内容边距</div>
                        <div class="right"> <el-input-number v-model="data.padding" :min="0" step-strictly
                            style="width: 100%" /></div>
                    </div>
                </div>
                <el-dialog v-model="dialogVisible" title="选择连接池" width="50%" :before-close="handleClose">
                    <div style="height: 300px">
                        <componentsDictList @dbRowBasicList="dbRowBasicList" :basicList="pollList" />
                    </div>
                </el-dialog>
                <el-dialog v-model="dialogVisibleData" title="选择数据" width="50%" :before-close="handleClose">
                    <div style="height: 300px">
                        <chartData @dbRowBasicList="dbRowChartDataList" :componentName="data.components" />
                    </div>
                </el-dialog>
            </el-scrollbar>
        </el-drawer>
    </div>
</template>

<script setup>
import {
    Search,Delete
} from '@element-plus/icons-vue'
import componentsDictList from '@/views/setting/basic/dbpool/components/index.vue'
import chartData from '@/components/chart/chartData/index.vue'
import { ref, inject, reactive, onMounted, onActivated } from 'vue'
import { pollList as pollListData, panel as initData } from '@/utils/chartInitData.js'
import { chartBorderComponent } from '@/utils/chart.js'


const emit = defineEmits(['propsDataEv'])

const drawer = ref(false)
const data = reactive(initData)
const pollList = reactive(pollListData)
const dialogVisible = ref(false)
const dialogVisibleData = ref(false)

const provideSaveEv = inject('provideSaveEv');

onMounted(() => {
    console.log(data)
})
onActivated(() => {

})

// 点击选择数据中心
const serachDataEv = () => {
    dialogVisibleData.value = true
}

// 子组件发送获取到的数据中心
const dbRowChartDataList = (val) => {
    data.wh = val.id
    data.wh_name = val.name
    data.sql = val.sql
    data.pool = val.pool
    data.pool_name = val.pool_name
    dialogVisibleData.value = false
}

const deleteDataWhEv = () =>{
    data.wh = ''
    data.wh_name = ''
}

// 子组件发送获取到的连接池
const dbRowBasicList = (val) => {
    data.pool = val.id
    data.pool_name = val.value
    dialogVisible.value = false
}

// 点击选择连接池
const serachPoolEv = () => {

    dialogVisible.value = true
}

// 父组件调用重新赋值data
const resetData = (val) => {
    console.log('父组件调用初始化数据', val)
    console.log(val.nameFontColor)
    Object.assign(data, val)
}

const saveEv = async () => {
    console.log('保存修改方法')
    await emit('propsDataEv', data)
    await provideSaveEv()
}

const previewEv = () => {
    console.log('推送数据给父组件', data)
    console.log(data.nameFontColor)
    emit('propsDataEv', data)
    drawer.value = false
}

const handleClose = (done) => {
    done()
}

defineExpose({
    drawer,
    resetData
})

</script>

<style lang='less' scoped>
@left-width: 120px;

.itm {
    border: 1px solid #dcdfe6;
    padding: 2px;
    box-sizing: border-box;
}

.itm-config {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #dcdfe6;
    box-sizing: border-box;

    .left {
        width: @left-width;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .right {
        width: calc(100% - @left-width);
    }

}

.itm .itm-config:last-of-type {
    border-bottom: 0 solid #dcdfe6;
    box-sizing: border-box;
}
</style>